<template>
  <el-form :model="state.queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form-item label="字典名称" prop="dictName">
      <el-input
          v-model="state.queryParams.dictName"
          placeholder="请输入字典名称"
          clearable
          size="small"
          style="width: 240px"
      />
    </el-form-item>
    <el-form-item label="字典类型" prop="dictType">
      <el-input
          v-model="state.queryParams.dictType"
          placeholder="请输入字典类型"
          clearable
          size="small"
          style="width: 240px"
      />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select
          v-model="state.queryParams.status"
          placeholder="字典状态"
          clearable
          size="small"
          style="width: 240px"
      >
        <el-option
            v-for="dict in state.statusOptions"
            :key="dict.dictCode"
            :label="dict.dictName"
            :value="dict.dictCode"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>

  <el-card class="category-container">
    <template #header>
      <div class="header">
        <el-button type="primary" :icon="Plus" @click="handleAdd">增加</el-button>
        <el-popconfirm
            title="确定删除吗？"
            confirmButtonText='确定'
            cancelButtonText='取消'
            @confirm="handleDelete"
        >
          <template #reference>
            <el-button type="danger" :icon="Delete">批量删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </template>
    <el-table
        :load="state.loading"
        ref="multipleTable"
        :data="state.tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
      >
      </el-table-column>
      <el-table-column
          prop="dictName"
          label="字典名称"
      >
      </el-table-column>
      <el-table-column
          prop="dictCode"
          label="字典类型"
      >
        <template #default="scope">
          <router-link :to="'/data/' + scope.row.id" class="link-type">
            <span>{{ scope.row.dictCode }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
      </el-table-column>
      <el-table-column
          label="操作"
          width="220"
      >
        <template #default="scope">
          <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">修改</a>
          <el-popconfirm
              title="确定删除吗？"
              confirmButtonText='确定'
              cancelButtonText='取消'
              @confirm="handleDeleteOne(scope.row.categoryId)"
          >
            <template #reference>
              <a style="cursor: pointer">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage"
    />
    <DialogAddDict ref='addDict' :reload="getCategory" :type="state.type"/>
  </el-card>
</template>

<script setup>

import {onMounted, onUnmounted, reactive, ref, toRefs, watchEffect} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {Plus, Delete} from '@element-plus/icons-vue'
import axios from '@/utils/axios'
import {listType} from '@/service/dict/type'
import {getDictList} from '@/service/dict/data'
import DialogAddDict from '@/components/DialogAddDict.vue'

const addDict = ref(null)
const router = useRouter() // 声明路由实例
const route = useRoute() // 获取路由参数
const state = reactive({
  statusOptions: [],
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dictName: undefined,
    dictType: undefined,
    status: undefined
  },
  loading: false,
  tableData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  type: 'add', // 操作类型
  level: 1,
  parent_id: 0
})
onMounted(() => {
  getCategory()
  getDicts()
})
watchEffect(() => {
  console.log(state.pageSize)
})
const unwatch = router.afterEach((to) => {

})
onUnmounted(() => {
  unwatch()
})
/** 搜索按钮操作 */
const handleQuery = () => {
  getCategory();
}
/** 重置按钮操作 */
const resetQuery = () => {

}

const getDicts = () => {
  getDictList("sys_common_status").then(response => {
    state.statusOptions = response;
  });
}
// 获取分类列表
const getCategory = () => {
  let param = {pageNumber: 1, pageSize: 10};
  param.dictName = state.queryParams.dictName;
  param.dictType = state.queryParams.dictType;
  param.status = state.queryParams.status;
  listType(param).then(res => {
    state.tableData = res.list
    state.total = res.totalCount
    state.currentPage = res.currPage
    state.loading = false
  });
}
const changePage = (val) => {
  state.currentPage = val
  getCategory()
}
// 添加分类
const handleAdd = () => {
  state.type = 'add'
  addDict.value.open()
}
// 修改分类
const handleEdit = (id) => {
  state.type = 'edit'
  addDict.value.open(id)
}
// 选择项
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 批量删除
const handleDelete = () => {
  if (!state.multipleSelection.length) {
    ElMessage.error('请选择项')
    return
  }
  axios.delete('/categories', {
    data: {
      ids: state.multipleSelection.map(i => i.categoryId)
    }
  }).then(() => {
    ElMessage.success('删除成功')
    getCategory()
  })
}
// 单个删除
const handleDeleteOne = (id) => {
  axios.delete('/categories', {
    data: {
      ids: [id]
    }
  }).then(() => {
    ElMessage.success('删除成功')
    getCategory()
  })
}
</script>

<style>

</style>